<template>
  <div class="hr-data">
    <div class="flex justify-between mb-16px">
      <div>
        <span class="font-size-20px font-bold mr-16px">面试官数据</span>
      </div>
      <a-range-picker @change="onChange" valueFormat="YYYY-MM-DD"/>
    </div>
    <div class="bottom_table">
      <div class="text-right">
        <a-input-search
          v-model:value="keywords"
          placeholder="输入姓名或手机号搜索"
          style="width: 368px"
          maxlength="11"
          @search="onSearch"
        />
        <a-select
          class="mx-10px"
          allowClear
          v-model:value="status"
          placeholder="请选择状态"
          style="width: 150px"
          :options="options"
        ></a-select>
        <a-button>
          <template #icon><clear-outlined /></template>
          重置
        </a-button>
      </div>
      <div class="result-wrap">
        <div class="inner" v-show="resultList.length > 0">
          <span v-for="item in resultList" class="result-item">
            {{ item.value }}
            <CloseOutlined @click="remove(item)" />
          </span>
          <span @click="removeAll" class="result-clear">清空条件</span>
        </div>
      </div>
      <BasicTable @register="registerTable">
        <template #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, visible, clearFilters, column }">
          <div style="padding: 8px;width: 215px;">
            <p class='tipes'>快捷操作</p>
            <div>
              <p>
                <ArrowUpOutlined />正序排序
              </p>
              <p>
                <ArrowDownOutlined />倒序排序
              </p>
            </div>
            <div class="filter-dropdown">
              <p class='tipes'>添加筛选条件</p>
              <div style="margin-bottom: 2px">
                <a-input ref="searchInput" :placeholder="`搜索 ${column.title}`" :value="state[column.key].searchText"
                  style="width: 178px; margin-bottom: 8px;" @change="handleInputChange($event, column)">
                  <template #prefix>
                    <SearchOutlined />
                  </template>
                </a-input>
                <div>
                  <Checkbox style="margin-bottom: 8px;" v-model:checked="state[column.key].checkAll"
                    :indeterminate="state[column.key].indeterminate" @change="onCheckAllChange(column)">
                    全选
                  </Checkbox>
                  <div style="">
                    <CheckboxGroup class='boxGroup' v-model:value="state[column.key].checkedList"
                      :options="state[column.key].options" />
                  </div>
                </div>
              </div>
            </div>

            <div style="display: flex;justify-content: space-between;margin-top: 10px;">
              <a-button type="text" size="small" @click="handleReset(column)">
                清除所选内容
              </a-button>
              <a-button type="primary" size="small" @click="handleSearch(selectedKeys, confirm, column)">
                确定
              </a-button>
            </div>
          </div>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            {{ record.status == 1 ? '在职' : '离职' }}
          </template>
        </template>
      </BasicTable>
      <div style="display: flex;align-items: baseline;" class="table_btnC">
        <a-checkbox v-model:checked="allchecked" @click="selectAllRows">全选</a-checkbox>
        <a-button class="btn" type="primary" size='default' style="margin-left: 10px;">数据导出</a-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref , computed } from 'vue'
import { columns } from './components/data.ts'
import { BasicTable, useTable, TableAction } from '@/components/Table'
import { Checkbox, CheckboxGroup, message } from 'ant-design-vue';

// 改变时间
const time = ref<[]>([])
function onChange(val:[]){
  time.value = val
}

//表格操作
const resultList = ref<any>([])

// 状态
const state = ref<any>({})
const keywords = ref<string>('')
const status = ref<any>(null)
const options = computed(() => {
  return [
    {
      value: '1',
      label: '在职'
    },
    {
      value: '0',
      label: '离职'
    },
  ]
})

// 搜索
function onSearch(){}

const allchecked = ref(false);

const tableData = ref([
  {
    key: '1',
    times: '文西',
    status: 0,
    region: '一部',
    a: 213,
    b: 1111,
    c: 22121,
    d: 33221,
    e: 43143,
    f: 525,
    g: 6361,
    h: 77131,
  },
  {
    key: '2',
    times: '达文西',
    status: 1,
    region: '二部',
    a: 21,
    b: 11,
    c: 221,
    d: 321,
    e: 443,
    f: 52,
    g: 61,
    h: 771,
  },
  {
    key: '3',
    times: 'suda',
    status: 1,
    region: '三部',
    a: 21,
    b: 11,
    c: 221,
    d: 321,
    e: 443,
    f: 52,
    g: 61,
    h: 771,
  },
]);
const [registerTable, { setPagination, getSelectRows, setSelectedRowKeys, clearSelectedRowKeys }] = useTable({
  title: '',
  dataSource: tableData,
  //api: getMathList,
  columns,
  formConfig: {
    labelWidth: 120,
    //schemas: searchFormSchema,
    autoSubmitOnEnter: true,
    showAdvancedButton: true,
    autoAdvancedLine: 4,
    showSubmitButton: false,
  },
  rowSelection: {
    type: 'checkbox'
  },
  useSearchForm: false,
  showTableSetting: false,
  showIndexColumn: false,
  bordered: true,
  canResize: false,
  beforeFetch(info) {

  },
  sortFn(sortInfo) {

  }
});

// 选中所有行
function selectAllRows() {
  console.log(allchecked.value)
  if (!allchecked.value) {
    const allKeys = tableData.value.map(row => row.key);
    setSelectedRowKeys(allKeys);
  } else {
    clearSelectedRowKeys();
  }
}

//所有的数据都从这里走的，点击时获取到对应的参数。放入state里
Object.keys(tableData.value[0]).forEach((el) => {
  state.value[el] = {};
});

// 通过Columns 获取state的options
const getColumns = (column, searchText: string = '') => {
  //获取筛选的数据选项
  const list: any = [];
  tableData.value.forEach((el) => {
    if (searchText) {
      if (el[column.key].toUpperCase().includes(searchText.toUpperCase())) {
        list.push({
          label: el[column.key],
          value: el.key,
        });
      }
    } else {
      if (typeof (column) == 'string') {
        list.push({
          label: el[column],
          value: el.key,
        });

      } else {
        list.push({
          label: el[column.key],
          value: el.key,
        });
      }

    }
  });
  return list;
};

//获取colums种的options放入state里
columns.forEach((el) => {
  if (el.customFilterDropdown) {
    state.value[el.key].options = getColumns(el.key);
  }
});

//点击确定
const handleSearch = (selectedKeys, confirm, column) => {
  confirm();
  getResult(column);
};

//获取筛选
const getResult = (column) => {
  const current = state.value[column.key];
  const checkedList = current.checkedList;
  const options = current.options;
  let result: any = [];
  if (checkedList?.length > 0) {
    options.forEach((el: any) => {
      checkedList.forEach((item) => {
        if (el.value === item) {
          result.push(el.label);
        }
      });
    });
  }
  let isExistedRow = resultList.value.find((el) => el.key == column.key);
  if (checkedList?.length === 0 && isExistedRow) {
    resultList.value = resultList.value.filter((el) => el.key != column.key);
    return;
  }
  const resStr = result.length > 3 ? result.slice(0, 3).join('、') + ' 等' : result.join('、');
  const finalMap = {
    label: column.title,
    key: column.key,
    value: `${column.title} 包含 ${resStr}`,
  };
  if (isExistedRow) {
    isExistedRow.value = finalMap.value;
  } else {
    resultList.value.push(finalMap);
  }
};

//输入框改变时
const handleInputChange = (event, column) => {
  let searchText = event.target.value;
  state.value[column.key].options = getColumns(column, searchText);
};

// 全选的时候获取参数
const onCheckAllChange = (column) => {
  state.value[column.key].indeterminate = false;
  if (state.value[column.key].checkAll) {
    const options = state.value[column.key].options;
    state.value[column.key].checkedList = options.map((el) => el.value);
  } else {
    state.value[column.key].checkedList = [];
  }
};

//取消全选的时候
const handleReset = (column) => {
  state.value[column.key].checkAll = false;
  state.value[column.key].indeterminate = false;
  state.value[column.key].checkedList = [];
};

//标签页清空所有的参数
const removeAll = () => {
  resultList.value.forEach((item) => {
    state.value[item.key].checkedList = [];
    state.value[item.key].indeterminate = false;
  });
  resultList.value = [];
};

const remove = (item) => {
  state.value[item.key].checkedList = [];
  state.value[item.key].indeterminate = false;
  resultList.value = resultList.value.filter((v) => v.key !== item.key);
};

</script>

<style lang="less" scoped>
.hr-data{
  
  color:#333;
  .bottom_table {
    margin-top: 20px;
    position: relative;
    background: #ffffff;
    padding: 20px;

    .table_btnC {
      display: flex;
      align-items: baseline;
      position: absolute;
      bottom: 15px;
      left: 45px;
    }

    .result-wrap {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 10px;
      align-items: center;
      min-height: 30px;
      line-height: 30px;
      margin-top: 10px;
      border-radius: 4px;

      .result-item {
        flex: 1;
        font-size: 12px;
        margin-right: 15px;
        border: 1px solid #ccc;
        padding: 3px 10px;
        border-radius: 4px;
        box-sizing: border-box;
      }

      .result-clear {
        color: #209ee4;
        cursor: pointer;
        font-size: 14px;
        border: 1px solid;
        padding: 1px 5px;
      }
    }

  }
}
.tipes {
  font-size: 12px;
  color: #ccc;
  margin-bottom: 15px;
}
.filter-dropdown {
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
}
:deep(.boxGroup) {
  display: flex;
  flex-direction: column;
}
</style>